<script setup lang='ts' name="admin-role-add">
import type { FormInstance, FormRules } from 'element-plus'

import { rIndexPrivileges, updateAdminRoles, userAuthInfo } from '@fl/api/iam-api'
import { ElButton, ElCheckbox, ElCheckboxGroup, ElDialog, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
import { nextTick, reactive, ref, toRefs } from 'vue'

const props = withDefaults(defineProps<{
    detail?: any
    modelValue: boolean
}>(), {
    detail: () => {},
})
const emits = defineEmits(['update:modelValue', 'confirm'])

const { detail, modelValue } = toRefs(props)

const form = ref({ description: '', display_name: '', privileges: [] })

const rules = reactive<FormRules<any>>({
    description: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
    display_name: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
    id: [
        { message: '不能为空', required: true, trigger: 'blur' },
    ],
})
const title = ref('新增')
const formRef = ref()
const authList = ref<any>([])

function getUserAuthInfo() {
    userAuthInfo().then((res) => {
        getRIndexPrivileges(res.org_id)
    })
}
getUserAuthInfo()

async function getRIndexPrivileges(data) {
    const params = {
        org_id: data,
    }
    rIndexPrivileges(params).then((res: any) => {
        console.log(res, '权限列表')
        res.forEach(((item: any) => {
            authList.value.push(item.code)
        }))
    })
}
async function doSave(formEl: FormInstance | undefined) {
    if (!formEl)
        return
    await formEl.validate((valid, fields) => {
        if (valid) {
            updateAdminRoles(form.value).then((res: any) => {
                console.log(res)
                close()
                emits('confirm')
            })
        }
        else {
            ElMessage.error('输入不能为空')

            console.log('error submit!', fields)
        }
    })
}
function close() {
    emits('update:modelValue', false)
}

async function init(isAdd = true) {
    await nextTick()
    if (isAdd) {
        title.value = '新增'
        form.value = { description: '', display_name: '', privileges: [] }
    }
    else {
        title.value = '编辑'
        form.value = detail.value
    }
}

defineExpose({
    init,
})
</script>

<template>
    <ElDialog v-model="modelValue"
              width="600"
              :title="title"
              @close="close"
    >
        <ElForm ref="formRef"
                :model="form"
                label-width="auto"
                :rules="rules"
                style="max-width: 500px; max-height: 800px; overflow: auto;"
        >
            <ElFormItem label="角色名称"
                        prop="display_name"
            >
                <ElInput v-model="form.display_name" />
            </ElFormItem>

            <!-- <el-form-item label="角色编码"
                          prop="id"
            >
                <el-input v-model="form.id" />
            </el-form-item> -->

            <ElFormItem label="角色描述"
                        prop="description"
            >
                <ElInput v-model="form.description" />
            </ElFormItem>

            <ElFormItem label="权限">
                <ElCheckboxGroup v-for="(item, index) in authList"
                                 :key="index"
                                 v-model="form.privileges"
                                 privileges
                >
                    <ElCheckbox :value="item"
                                :label="item"
                    >
                        {{ item }}
                    </ElCheckbox>
                </ElCheckboxGroup>
            </ElFormItem>

            <ElFormItem flex
                        flex-col
            >
                <ElButton type="primary"
                          @click="doSave(formRef)"
                >
                    确定
                </ElButton>

                <ElButton @click="close">
                    取消
                </ElButton>
            </ElFormItem>
        </ElForm>
    </ElDialog>
</template>
